<{include file="top.html"}>
</head>
<body>
<div class="xy-panel">
    <div class="xy-panel-top">
        <div class="xy-titlebar">
            <div class="xy-titlebar-left">
                <a class="left_arrow_gray_unlink" href="<{U('PointLottery/index')}>&status=<{$status}>"></a>
            </div>
            <div class="xy-titlebar-title">商品详情</div>
            <div class="xy-titlebar-right"></div>
        </div>
    </div>
    <div class="xy-panel-content" style="bottom:0;">
        <div class="xy-row vDirectionRow">
            <div class="flicking_con">
                <div class="flicking_inner">
                    <{foreach from=$marquee item=item key=key}>
                        <a href="javascript:void(0);"><{$key}></a>
                    <{/foreach}>

                </div>
            </div>
            <div class="main_image">
                <ul>
                    <{foreach from=$marquee item=item}>
                        <li><img src="<{$item}>"></li>
                    <{/foreach}>
                </ul>
                <a href="javascript:void(0);" id="btn_prev"></a>
                <a href="javascript:void(0);" id="btn_next"></a>
            </div>
            <div class="details-box">
                <h3><{$data.title}></h3>
                <div class="details-list">
                    <dl><i class="icon admin_icon"></i>可参与用户：<{if $data.userLevelRequire==0}>所有用户<{else}><i class="level"><i>•</i>Lv.<{$data.userLevelRequire}></i>及以上用户<{/if}></dl>
                    <dl><i class="icon money_icon"></i>商品参考价：¥<{$data.originalPrice}><span><i>•</i>商品数量：<{$data.prizeNum}></span></dl>
                </div>
            </div>
            <div class="details-box" style="margin-top:1rem;">
                <{if $data.finishType==2}>
                    <h3>
                        <dl><i>•</i>人数</dl>
                        <div class="votebox">
                            <i class="barword">已参与<{$data.joinTimes}>人</i>
                            <dl class="barbox">
                                <dd class="barline">
                                    <div w="<{$data.joinTimes}>" style="width:0px;" class="charts"></div>
                                </dd>
                            </dl>
                        </div>
                        <dl class="surplus">剩余<span><{$remainder}></span>人</dl>
                    </h3>
                <{/if}>
                <div class="details-list">
                    <dl><i class="icon clock_icon"></i>开抢时间：<{$data.beginTime|date_format:'%Y-%m-%d %H:%M'}></dl>
                    <dl><i class="icon"></i><{if $data.finishType==1}>开奖时间<{else}>结束时间<{/if}>：<{$data.endShowTimestamp|date_format:'%Y-%m-%d %H:%M'}></dl>
                </div>
            </div>
            <{if $status == 3}>
                <div class="get_box" style="margin-top:1rem; border-top:none;">
                    <h3 class="get-topic">获奖名单</h3>
                    <{if $data.userInfo}>
                    <{foreach from=$data.userInfo item=item key=key}>
                    <dl><{$key+1}>、<{$item.nickname}>&nbsp;&nbsp;&nbsp;手机号码：<{$item.bindPhone}></dl>
                    <{/foreach}>
                    <{else}>
                    <p>暂无获奖人信息</p>
                    <{/if}>
                </div>
            <{/if}>
            <div class="details-con">
                <h3>商品详情</h3>
                <p><{$data.content|strip_tags}></p>
            </div>
            <{if $data.beginTime > $smarty.now}>
                <!--<a class="partake-btn" style="background-color: #ccc">活动预告</a>-->
            <{else}>
                <{if $flag==0}><a class="partake-btn" id="partake-btn"><span name="payPoints"><{$data.points}></span>积分参与抽奖</a>
                <{else}><a class="partake-btn" style="background-color: #ccc">已参与</a><{/if}>
            <{/if}>
        </div>
    </div>
</div>
<!--购买数量弹框-->
    <div class="buynub_box" style="display:none;">
        <form>
            <label>购买数量</label>
            <input type="button" class="minus_icon" value="">
            <input type="text" name="amount" id="amount" value="1" readonly>
            <input type="button" class="add_icon" value="" >
        </form>
    </div>

<!--弹出框—积分兑换-->
    <div class="hint-box" style="display:none;">
        <div class="hint exchange_box">
            <h3 class="topic">确认参与？</h3>
            <dl class="list">所需积分（拥有<{$userinfo.point}>积分）<span><i id="costPoint"><{$data.points}></i>积分</span></dl>
            <div class="btn_box">
                <button type="button" class="button" id="cancel">取 消</button>
                <button type="button" class="button" id="confirm">确 认</button>
            </div>
        </div>
    </div>
<{include file="signBody.html"}>
</body>
</html>
<script src="<{$preStaticUrl}>Wap/js/flexible.js"></script>
<script type="text/javascript" src="<{$preStaticUrl}>Wap/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="<{$preStaticUrl}>Wap/js/jquery.touchSlider.js"></script>
<script language="javascript">
    var lotteryType = "<{$data.finishType}>";
    var userLevel = "<{$userinfo.level}>";
    var requireLevel = "<{$data.userLevelRequire}>";
    $(document).ready(function(){
        if(lotteryType==1){
            var flag=0;//标志第几次点击;
            $("#partake-btn").click(function(){
                if(requireLevel > 0){
                    if(userLevel < requireLevel){
                        layer.msg('您的等级不够');
                        return false;
                    }
                }
                flag ++;
                $(".buynub_box").css({"display":"block"});
                if(flag==1) {
                    var quota = parseInt("<{$data.quota}>");
                    var payPoints = parseInt($("[name='payPoints']").text());
                    var points = parseInt("<{$data.points}>");
                    $(".add_icon").click(function () {
                        if(quota > 0){
                            if (this.form.amount.value < quota) {
                                this.form.amount.value++;
                                points += payPoints;
                                $("[name='payPoints']").text(points);
                            } else {
                                layer.msg("每人限购" + quota + "份哦>.<");
                            }
                        } else if(quota == 0){
                            this.form.amount.value++;
                            points += payPoints;
                            $("[name='payPoints']").text(points);
                        }
                    });
                    $(".minus_icon").click(function () {
                        if (this.form.amount.value > 0) {
                            this.form.amount.value--;
                            points -= payPoints;
                            $("[name='payPoints']").text(points);
                        } else {
                            layer.msg("请选择购买数量");
                        }
                    });
                }
                else{
                        $(".list span i").html($("[name='payPoints']").text());
                        $(".hint-box").css({"display":"block"});
                        $("#cancel").click(function(){
                            $(".hint-box").css({"display":"none"});
                        });
                        $("#confirm").click(function(){
                            exchange();
                        })
                }
            });
        }
        else{
                $("#partake-btn").click(function(){
                    $(".hint-box").css({"display":"block"});
                    $("#cancel").click(function(){
                        $(".hint-box").css({"display":"none"});
                    });
                    $("#confirm").click(function(){
                        exchange();
                    })
                });
            }
    });
    function exchange(){
        var exchangeNum = $("[name='amount']").val();
        var type = "<{$data.finishType}>";
        var lotteryID = "<{$data.id}>";
        var requirePoint = "<{$data.points}>";
        $.ajax({
            url:"<{U('PointLottery/doExchange')}>",
            dataType:"json",
            data:{"type":type,"lotteryID":lotteryID,"exchangeNum":exchangeNum,"requirePoint":requirePoint},
            type:"POST",
            success:function(data){
                if(data.status==0){
                    $(".buynub_box").css({"display":"none"});
                    layer.msg(data.msg);
                    if(data.fullMember){
                        location.href = "<{U('PointLottery/reviewDetail')}>&id="+lotteryID;
                    } else {
                        location.reload();
//                        window.history.go(-1);
                    }
                }else{
                    layer.msg(data.msg);
                    if(data.status==1){
                        location.reload();
                    } else if(data.status==2){
                        window.location.href="<{U('User/login')}>&uri="+data.url;
                    } else if(data.status==3){
                        window.location.href="<{U('User/bind')}>&url="+data.url;
                    }

                }
            }
        })
        $(".hint-box").css({"display":"none"});
    }

    function animate(){
        $(".charts").each(function(i,item){
            var remainder = "<{$remainder}>";
            var joinPeople = "<{$data.joinPeople}>";
            if(remainder>0){
                var a=parseInt($(item).attr("w"))*100/joinPeople;
                $(item).animate({
                    width: a+"%"
                },1000);
            }else{
                $(item).animate({
                    width: 100+"%"
                },1000);
            }
        });
    }
    animate();
</script>
<script language="javascript">
    $(document).ready(function () {
        $(".main_visual").hover(function(){
            $("#btn_prev,#btn_next").fadeIn()
        },function(){
            $("#btn_prev,#btn_next").fadeOut()
        })
        $dragBln = false;
        $(".main_image").touchSlider({
            flexible : true,
            speed : 200,
            btn_prev : $("#btn_prev"),
            btn_next : $("#btn_next"),
            paging : $(".flicking_con a"),
            counter : function (e) {
                $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
            }
        });
        $(".main_image").bind("mousedown", function() {
            $dragBln = false;
        })
        $(".main_image").bind("dragstart", function() {
            $dragBln = true;
        })
        $(".main_image a").click(function() {
            if($dragBln) {
                return false;
            }
        })
        timer = setInterval(function() { $("#btn_next").click();}, 5000);
        $(".main_visual").hover(function() {
            clearInterval(timer);
        }, function() {
            timer = setInterval(function() { $("#btn_next").click();}, 5000);
        })
        $(".main_image").bind("touchstart", function() {
            clearInterval(timer);
        }).bind("touchend", function() {
            timer = setInterval(function() { $("#btn_next").click();}, 5000);
        })
    });
</script>
